<template>
  <div class="dataShow">
    <div style="min-height: 100vh">
      <area-tree @selected="getSelectArea" :is-edit-tree="false"/>
    </div>
    <div class="data-c">
      <data-show-reported/>
      <data-show-chart :chart-data="chartData"/>
    </div>
    <div class="data-map">
      <open-map map-height="100vh" map-width="100%"/>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue, ProvideReactive} from 'vue-property-decorator';
import AreaTree from "@/views/dataShow/components/AreaTree.vue";
import DataShowReported from "@/views/dataShow/components/DataShowReported.vue";
import DataShowChart from "@/views/dataShow/components/DataShowChart.vue";
import OpenMap from "@/components/OpenMap.vue";
import {progressChart} from '@/api/dataShow';
@Component({
  components: {
    OpenMap,
    AreaTree,
    DataShowReported,
    DataShowChart
  }
})
export default class dataShow extends Vue {
  @ProvideReactive() workId:any = 0;
  @ProvideReactive() areaId:any = 0;
  chartData:any = {
    axis:[],
    series:[]
  };
  /**
   * 区划选择回调
   * @param areaInfo 区划信息
   */
  getSelectArea(areaInfo) {
    this.workId = areaInfo.workId
    this.areaId = areaInfo.areaId
    this.queryChartData()
  }
  /**
   * 查询各区划数据统计
   */
  queryChartData() {
    progressChart({"workId":this.workId, "areaId":this.areaId}).then(res=> {
      if (res && res.data) {
        this.chartData = res.data
      }
    })
  }

}
</script>
<style lang="scss" scoped>
.dataShow{
  display: flex;
  gap: 10px;
  .data-c{
    flex: 1;
  }
  .data-map{
    flex: 1;
  }
}
</style>
